<template>
	<!-- 经营决策 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">销售收入统计</text></view>
				</template>
				<my-grid :list="list1" :decimals="2" :col="2"></my-grid>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">企业利润统计</text></view>
				</template>
				<my-grid :list="list2" :decimals="2" :col="2"></my-grid>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">企业成本统计</text></view>
				</template>
				<view class="p-10  m-b-10 m-t-10" style="background-color: #F1F6FC;">
					年度成本累计 845万元
					<view style="float:right">同比下降 20.3%</view>
				</view>
				<view class="flex m-b-10 p-10" v-for="(item, index) in list3" :key="index" style="font-size: 16px;"
					:class="{ 'even-background': (index+1) % 2 === 0 }">
					<view class="fw">
						{{index+1}}
					</view>
					<view class="m-l-20">
						{{item.title}}
					</view>
					<view class="m-r-20" style=" margin-left: auto;">
						{{item.value}}
					</view>
				</view>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">采购统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">人力资源情况</text></view>
				</template>
				<u-tabs lineColor="#2172FC" :list="[{name: '年龄'},{name: '学历'}]"
					:activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @click="click"></u-tabs>
				<view class="charts-box m-t-10">
					<qiun-data-charts type="column" :opts="opts4" :chartData="chartData4" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5])

	const list1 = ref([{
			title: '年度销售收入',
			value: '2345',
			unit: '万元'
		}, {
			title: '同比上升',
			value: '20.3',
			unit: '%'
		}]),
		list2 = ref([{
			title: '年度销售收入',
			value: '1234',
			unit: '万元'
		}, {
			title: '同比上升',
			value: '20.3',
			unit: '%'
		}]),
		list3 = ref([{
			title: '员工薪酬',
			value: '300万元',
		}, {
			title: '采购',
			value: '200万元',
		}, {
			title: '能耗',
			value: '100万元',
		}, {
			title: '设备维修',
			value: '50万元',
		}])

	const chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		chartData4 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				data: [{
					min: 0,
					axisLine: false,
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow",
				}
			}
		},
		opts2 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
				"#ea7ccc"
			],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				data: [{
					min: 0,
					axisLine: false,
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow",
				}
			}
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: false,
			},
			title: {
				name: "845万元",
				fontSize: 15,
				color: "#000",
				offsetY: -10
			},
			subtitle: {
				name: "同比下降20.3%",
				fontSize: 15,
				color: "#000"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts4 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				data: [{
					min: 0,
					axisLine: false,
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "opacity",
					linearOpacity: 0.1,
				}
			}
		}

	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				categories: ["2024-02", "2024-04", "2024-06", "2024-08", "2024-10", "2024-12"],
				series: [{
					name: "",
					data: [3, 4, 2.5, 4, 5, 6]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));

			let res2 = {
				categories: ["2024-02", "2024-04", "2024-06", "2024-08", "2024-10", "2024-12"],
				series: [{
					name: "",
					data: [3, 4, 2.5, 4, 5, 6]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));

			let res3 = {
				series: [{
					data: [{
						name: "机电部",
						value: 100
					}, {
						name: "综合部",
						value: 150
					}, {
						name: "生产部",
						value: 151
					}, {
						name: "技术部",
						value: 104,
					}, {
						name: "地测部",
						value: 221,
					}, {
						name: "其他",
						value: 221,
					}]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res3));

			let res4 = {
				categories: ["18-30", "30-40", "40-50", "50-60", "60岁以上"],
				series: [{
					name: "",
					data: [80, 140, 240, 170, 110]
				}]
			};
			chartData4.value = JSON.parse(JSON.stringify(res4));

		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	.even-background {
		background-color: #F1F6FC;
	}
</style>